<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仿王者荣耀官网购物页</title>
  <link rel="shortcut icon" href="images/title-logo.jpg">
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="icon/iconfont.css">
  <link rel="stylesheet" href="css/shopping.css">
  <script src="js/echarts.js"></script>
  <script src="js/header.js" defer></script>
  <script src="js/shopping.js" defer></script>
</head>

<body>
  <header>
    <div class="all-nav">
      <div class="nav">
        <ul>
          <li><a href="index.html"><img src="images/header-logo.png" alt=""></a></li>
          <li><a href="shopping.html">购物车</a></li>
          <li><a href="estimate.html">评论区</a></li>
          <li><a href="diaoyan.html">满意度调研</a></li>
          <li><a href="temp.html">新英雄介绍</a></li>
          <li><a href="vary.html">百态王者</a></li>
          <li><a href="change.html">游戏资料介绍</a></li>
          <li><a href="protect.html">保护体系</a></li>
          <li><a href="">IP新游</a></li>
          <li>
            <a href="denglu.html"><img src="images/header-ico.png" alt="" class="photo-ico"><span>欢迎登陆</span></a>
          </li>
        </ul>
      </div>
      <div class="navb">
        <ul>
          <li>
            <ul>
              <li>版本介绍</li>
              <li>游戏介绍</li>
              <li>英雄资料</li>
              <li>爆料站</li>
              <li>世界观体验站</li>
              <li>游戏壁纸</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>攻略中心</li>
              <li>开放素材库</li>
              <li>内容共创平台</li>
              <li>手语打法教学</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>王者世冠KIC</li>
              <li>KPL</li>
              <li>K甲联赛</li>
              <li>挑战者杯</li>
              <li>全国大赛</li>
              <li>高校联赛</li>
              <li>王者赛宝</li>
              <li>赛事数据</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>荣耀·传承</li>
              <li>王者文化站</li>
              <li>万千世界</li>
              <li>王者觉悟</li>
              <li>星光殿堂</li>
              <li>IP共创计划</li>
              <li>商户特权</li>
              <li>龙翼王者卡</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>创意互动营</li>
              <li>王者营地</li>
              <li>微信圈子</li>
              <li>官方微博</li>
              <li>微信公众号</li>
              <li>手Q订阅</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>腾讯游戏防沉迷</li>
              <li>成长守护平台</li>
              <li>对局环境情报站</li>
              <li>客服专区</li>
              <li>礼包兑换</li>
              <li>自助服务</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>王者荣耀·世界</li>
              <li>王者荣耀 星之破晓</li>
              <li>代号:启程</li>
              <li>王者万象棋</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="ajax">
      <p></p>
    </div>
  </header>
  <h1><i class="iconfont icon-pifu"></i><a href="">精品皮肤</a></h1>
  <main>
    <div class="first-part">
      <h3>echarts皮肤销售数据可视化</h3>
      <div id="main" style="width: 600px;height:400px;" class="box"></div>
    </div>
    <div class="second-part">
      <h3>精品皮肤销售</h3>
      <div class="yongzhe">
        <h4>勇者品质</h4>
        <div class="div1">
          <img src="images/index-clothes1.jpg" alt="" title="破局者——亚连" data-price="280">
          <i class="iconfont icon-gouwuche"></i>
          <p></p>
        </div>
        <div class="div1">
          <img src="images/shopping-勇者1.jpg" alt="" title="归虚梦演——西施" data-price="280">
          <i class="iconfont icon-gouwuche"></i>
          <p></p>
        </div>
        <div class="div1">
          <img src="images/shopping-勇者3.jpg" alt="" title="花间舞——公孙离" data-price="280">
          <i class="iconfont icon-gouwuche"></i>
          <p></p>
        </div>
      </div>
      <div class="shishi">
        <h4>史诗品质</h4>
        <div class="div1">
          <img src="images/index-clothes2.jpg" alt="" title="特工魅影——百里守约" data-price="880">
          <i class="iconfont icon-gouwuche"></i>
          <p></p>
        </div>
        <div class="div1">
          <img src="images/shopping-勇者2.jpg" alt="" title="据霜思——嫦娥" data-price="60">
          <i class="iconfont icon-gouwuche"></i>
          <p></p>
        </div>
      </div>
      <div class="chuanshuo">
        <h4>传说品质</h4>
        <div class="div1">
          <img src="images/index-clothes3.jpg" alt="" title="画中仙——干将莫邪" data-price="1680">
          <i class="iconfont icon-gouwuche"></i>
          <p></p>
        </div>
        <div class="div1">
          <img src="images/index-clothes4.jpg" alt="" title="浮生妄——夏洛特" data-price="1680">
          <i class="iconfont icon-gouwuche"></i>
          <p></p>
        </div>
      </div>
      <div class="miaosha">
        <h4>限时秒杀</h4>
        <div class="div2">
          <img src="images/shopping-xianshi1.jpg" alt="" title="末日机甲——孙策" data-price="440">
          <i class="iconfont icon-gouwuche"></i>
          <p class="p1">限时秒杀价<span class="s0">440点券</span></p>
          <p class="p2">活动倒计时<span class="s1">00</span>:<span class="s2">00</span>:<span class="s3">00</span></p>
        </div>
      </div>
    </div>
    <div class="third-part">
      <p><i class="iconfont icon-gouwuche"></i>购物车</p>
      <table class="table">
        <thead>
          <tr>
            <th><input type="checkbox" name="checkAll" class="checkAll">全选</th>
            <th>商品</th>
            <th>单价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
      <table>
        <tr>
          <td>总价</td>
          <td colspan="3" class="all-price">0</td>
        </tr>
        <tr>
          <td colspan="4"><button type="button" class="print">打印购物清单</button></td>
        </tr>
      </table>
  </main>
  <footer>
    <img src="images/footer-img.png" alt="">
    <hr>
    <p>抵制不良游戏拒绝盗版游戏注意自我保护谨防受骗上当适度游戏益脑沉迷游戏伤身合理安排时间享受健康生活</p>
    <p>《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p>
    <hr>
    <p>此网站由</p>
    <p>郭明斌、马召蒙、许泽坚</p>
    <p>共同创作</p>
    <p>创作不易，请一键三连哦</p>
  </footer>
</body>

</html>